<template>
  <div class='container'>
    <el-dialog title="题目预览" @close="dialogclose" :visible="showDialog" width="900px">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content">【题型】：{{ Question.questionType|famtquestionType }}</div></el-col>
        <el-col :span="6"><div class="grid-content">【编号】：{{ Question.id }}</div></el-col>
        <el-col :span="6"><div class="grid-content">【难度】：{{ Question.difficulty|famtdifficulty }}</div></el-col>
        <el-col :span="6"><div class="grid-content">【标签】：{{ Question.tags }}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content">【学科】：{{ famtsubjectID(Question.subjectID)}}</div></el-col>
        <el-col :span="6"><div class="grid-content">【目录】：{{ famtcatalogID(Question.catalogID) }}</div></el-col>
        <el-col :span="6"><div class="grid-content">【方向】：{{ Question.direction}}</div></el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col><span class="grid-content">【题干】：<span v-html="Question.question" style="color:blue"></span></span></el-col>
      <!-- </el-row> -->
      <!-- <el-row> -->
        <el-col>
          <!-- <div class="grid-content">{{ Question.questionType=="3"?'简答题':(Question.questionType) + '题 选项：(以下选中的选项为正确答案)'}} -->
          <div class="grid-content" v-if="Question.questionType==3">简答题
            <span v-html="Question.answer"></span>
          </div>
          <div class="grid-content" v-else>{{Question.questionType|famtquestionType}}题 选项：(以下选中的选项为正确答案)
          <div v-for="(item, index) in Question.options" :key="index" style="padding: 8px 0px">
            <el-radio v-show="Question.questionType === '1'" :value="item.isRight" :label="1">{{ item.title }}</el-radio>
            <el-checkbox v-show="Question.questionType === '2'" :value="item.isRight ? true : false" >{{item.title}}</el-checkbox>
          </div>
          </div>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col>
          <div class="grid-content">【参考答案】：
            <el-button type="danger" size="small" @click="videoshow = !videoshow">
            视频答案预览
            </el-button>
          </div>
          <video :src="Question.videoURL" autoplay controls v-if="videoshow" width="500px"></video>
          </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col><div class="grid-content">【答案解析】：<span v-html="Question.answer"></span></div></el-col>
        <!-- <el-col><div class="grid-content">【答案解析】：{{ Question.answer}}</div></el-col> -->
      </el-row>
      <hr />
      <el-row>
        <el-col><div class="grid-content">【题目备注】：{{ Question.remarks }}</div></el-col>

      </el-row>
      <el-row slot="footer" type="flex" justify="end">
          <el-button size="small" type="primary" @click="dialogclose">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { difficulty, questionType } from '@/api/hmmm/constants'

export default {
  props: {
    showDialog: {
      type: Boolean,
      required: true
    },
    catalogIDList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      videoshow: false,
      Question: {},
      subjectlist: []
    }
  },
  created () {
    this.simple()
  },
  methods: {
    async detail (Query) {
      // console.log(Query)
      const { data } = await detail(Query)
      this.Question = data
      // console.log(this.Question)
    },
    dialogclose () {
      this.videoshow = false
      this.$emit('update', false)
    },
    async simple  () {
      const { data } = await simple()
      this.subjectlist = data
      // console.log(data)
    },
    famtsubjectID (value) {
      if (value > 0) {
        const b = this.subjectlist.find(item => {
          if (Number(item.value) === Number(value)) {
            return item
          }
        })
        return b.label
      } else {
        return ''
      }
    },
    famtcatalogID (value) {
      if (value > 0) {
        const b = this.catalogIDList.find(item => {
          if (Number(item.value) === Number(value)) {
            return item
          }
        })
        return b.label
      } else {
        return ''
      }
    }
  },
  filters: {
    famtquestionType: function (value) {
      if (value > 0) {
        const c = questionType.find(item => {
          if (item.value === Number.parseInt(value)) {
            return true
          }
        })
        return c.label
      } else {
        return ''
      }
    },
    famtdifficulty: function (value) {
      if (value > 0) {
        const d = difficulty.find(item => {
          if (item.value === Number.parseInt(value)) {
            return true
          }
        })
        return d.label
      } else {
        return ''
      }
    },
    formType: function (value) {
      if (value === '1') {
        return '单选'
      }
      if (value === '2') {
        return '多选'
      }
      if (value === '3') {
        return '简答'
      }
    }
  }
}
</script>

<style scoped>
.header {
margin-bottom: 20px;
}
.explain {
  color: pink;
  font-size: 12px;
}
.table {
width: 100%;
margin-top: 15px;
}
.demo-form-inline /deep/ .el-input__inner {
    height: 32px;
    line-height: 32px;
}
.el-form-item--medium {
    margin-bottom: 16px;
}

.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
